
$(function(e){
	dataInit();
});

function dataInit(){
	
	eventInit();
}

function eventInit(){
    themeprimary = getThemeColorFromCss('themeprimary');
    themesecondary = getThemeColorFromCss('themesecondary');
    themethirdcolor = getThemeColorFromCss('themethirdcolor');
    themefourthcolor = getThemeColorFromCss('themefourthcolor');
    themefifthcolor = getThemeColorFromCss('themefifthcolor');
    $('#dashboard-bandwidth-chart')
        .data('width', $('.box-tabbs')
            .width() - 20);
    var data = [
        {
            data: [[1, 21]],
            color: '#fb6e52'
        },
        {
            data: [[1, 12]],
            color: '#e75b8d'
        },
        {
            data: [[1, 11]],
            color: '#a0d468'
        },
        {
            data: [[1, 10]],
            color: '#ffce55'
        },
        {
            data: [[1, 46]],
            color: '#5db2ff'
        }
    ];
    var placeholder = $("#dashboard-pie-chart-sources");
    placeholder.unbind();
    $.plot(placeholder, data, {
        series: {
            pie: {
                innerRadius: 0.45,
                show: true,
                stroke: {
                    width: 4
                }
            }
        }
    });
    var data2 = [{
        color: themesecondary,
        label: "Direct Visits",
        data: [[3, 2], [4, 5], [5, 4], [6, 11], [7, 12], [8, 11], [9, 8], [10, 14], [11, 12], [12, 16], [13, 9],
        [14, 10], [15, 14], [16, 15], [17, 9]],

        lines: {
            show: true,
            fill: true,
            lineWidth: .1,
            fillColor: {
                colors: [{
                    opacity: 0
                }, {
                    opacity: 0.4
                }]
            }
        },
        points: {
            show: false
        },
        shadowSize: 0
    },
        {
            color: themeprimary,
            label: "Referral Visits",
            data: [[3, 10], [4, 13], [5, 12], [6, 16], [7, 19], [8, 19], [9, 24], [10, 19], [11, 18], [12, 21], [13, 17],
            [14, 14], [15, 12], [16, 14], [17, 15]],
            bars: {
                order: 1,
                show: true,
                borderWidth: 0,
                barWidth: 0.4,
                lineWidth: .5,
                fillColor: {
                    colors: [{
                        opacity: 0.4
                    }, {
                        opacity: 1
                    }]
                }
            }
        },
        {
            color: themethirdcolor,
            label: "Search Engines",
            data: [[3, 14], [4, 11], [5, 10], [6, 9], [7, 5], [8, 8], [9, 5], [10, 6], [11, 4], [12, 7], [13, 4],
            [14, 3], [15, 4], [16, 6], [17, 4]],
            lines: {
                show: true,
                fill: false,
                fillColor: {
                    colors: [{
                        opacity: 0.3
                    }, {
                        opacity: 0
                    }]
                }
            },
            points: {
                show: true
            }
        }
    ];
    var options = {
        legend: {
            show: false
        },
        xaxis: {
            tickDecimals: 0,
            color: '#f3f3f3'
        },
        yaxis: {
            min: 0,
            color: '#f3f3f3',
            tickFormatter: function (val, axis) {
                return "";
            },
        },
        grid: {
            hoverable: true,
            clickable: false,
            borderWidth: 0,
            aboveData: false,
            color: '#fbfbfb'
        },
        tooltip: true,
        tooltipOpts: {
            defaultTheme: false,
            content: " <b>%x May</b> , <b>%s</b> : <span>%y</span>",
        }
    };
    var placeholder = $("#dashboard-chart-visits");
    var plot = $.plot(placeholder, data2, options);
    var data = [],
        totalPoints = 300;
    function getRandomData() {
        if (data.length > 0)
            data = data.slice(1);
        while (data.length < totalPoints) {
            var prev = data.length > 0 ? data[data.length - 1] : 50,
                y = prev + Math.random() * 10 - 5;
            if (y < 0) {
                y = 0;
            } else if (y > 100) {
                y = 100;
            }
            data.push(y);
        }
        var res = [];
        for (var i = 0; i < data.length; ++i) {
            res.push([i, data[i]]);
        }
        return res;
    }
    var updateInterval = 100;
    var plot = $.plot("#dashboard-chart-realtime", [getRandomData()], {
        yaxis: {
            color: '#f3f3f3',
            min: 0,
            max: 100,
            tickFormatter: function (val, axis) {
                return "";
            }
        },
        xaxis: {
            color: '#f3f3f3',
            min: 0,
            max: 100,
            tickFormatter: function (val, axis) {
                return "";
            }
        },
        colors: [themeprimary],
        series: {
            lines: {
                lineWidth: 0,
                fill: true,
                fillColor: {
                    colors: [{
                        opacity: 0.5
                    }, {
                        opacity: 0
                    }]
                },
                steps: false
            },
            shadowSize: 0
        },
        grid: {
            hoverable: true,
            clickable: false,
            borderWidth: 0,
            aboveData: false
        }
    });
    function update() {
        plot.setData([getRandomData()]);
        plot.draw();
        setTimeout(update, updateInterval);
    }
    update();
    InitiateEasyPieChart.init();
    InitiateSparklineCharts.init();
}